
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script src="./three.js"></script>
        <script src="./OrbitControls.js"></script>
        <script src="./stats.min.js"></script>


        <script>

        let scene,camera,renderer
        let cube
        let controls,stats
        var aspect = window.innerWidth / window.innerHeight;

        init()

        animate()

        function init(){
            // <!-- 开始建立cube模型 -->
            // 创建场景
            scene = new THREE.Scene()
            scene.background = new THREE.Color( 0xf0f0f0 );

                //创建结构
                const geometry = new THREE.BoxGeometry(50,50,50)

                //创建材质
                const material = new THREE.MeshLambertMaterial({
                    color:0xffffff
                    // wireframe:true,
                     // vertexColors: THREE.FaceColors
                })

            //创建模型
            // cube = new THREE.Mesh(geometry,material)
            for(let i = 0;i<100;i++){
                let cube = new THREE.Mesh(geometry,material)

                cube.scale.y = Math.floor(Math.random()*3 + 1)

                cube.position.x = Math.floor( ( Math.random() * 1000 - 500 ) / 50 ) * 50 + 25;
                cube.position.y = cube.scale.y*50/2
                cube.position.z = Math.floor( ( Math.random() * 1000 - 500 ) / 50 ) * 50 + 25;


                scene.add(cube)
            }

            //向场景中插入模型
            // scene.add(cube)

            //插入网格
            let gridHelper = new THREE.GridHelper(1000,20)
            scene.add(gridHelper)

            // console.log(Math.random().normalize());


            //创建相机
            // camera = new THREE.(45, window.innerWidth/window.innerHeight, 1, 1000)
            camera = new THREE.OrthographicCamera(1000 * aspect / - 2, 1000 * aspect / 2, 1000 / 2, 1000 / - 2, 1, 2000)
            // camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000)

            camera.position.y = 400

            //加入点光源
            // const point = new THREE.PointLight(0xffffff)
            // point.position.set(400,200,300)//设置位置
            // scene.add(point)

            //加入环境光源
            const ambient = new THREE.AmbientLight(Math.random() * 0x10 )
            scene.add(ambient)//环境光不用设置光源位置

            // Lights

            var ambientLight = new THREE.AmbientLight( Math.random() * 0x10 );
            scene.add( ambientLight );

            var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
            directionalLight.position.x = Math.random() - 0.5;
            directionalLight.position.y = Math.random() - 0.5;
            directionalLight.position.z = Math.random() - 0.5;
            directionalLight.position.normalize();
            scene.add( directionalLight );

            var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
            directionalLight.position.x = Math.random() - 0.5;
            directionalLight.position.y = Math.random() - 0.5;
            directionalLight.position.z = Math.random() - 0.5;
            directionalLight.position.normalize();
            scene.add( directionalLight );

            //插入辅助axis
            const axis = new THREE.AxesHelper(250)
            scene.add(axis)

            //插入性能检测
            stats = new Stats();
            document.body.appendChild( stats.dom );

            //创建渲染器
            renderer = new THREE.WebGLRenderer()

            renderer.setPixelRatio( window.devicePixelRatio );//设置设备像素比。通常用于避免HiDPI设备上绘图模糊
            renderer.setSize(window.innerWidth,window.innerHeight)
            renderer.setClearColor(0xf0f0f0)
            document.body.appendChild(renderer.domElement)

			window.addEventListener( 'resize', onWindowResize, false );//屏幕自适应



            //实现鼠标操作
            controls = new THREE.OrbitControls(camera)
            //添加渲染函数
            // controls.update()


    }

        function onWindowResize() {

            var aspect = window.innerWidth / window.innerHeight;

            camera.left   = - 1000 * aspect / 2;
            camera.right  = 1000 * aspect / 2;
            camera.top    = 1000 / 2;
            camera.bottom = - 1000 / 2;

            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

        }

        function animate() {

            requestAnimationFrame( animate );//定时函数
            // controls.update()

            stats.begin();//性能检测模块
            render();
            stats.end();
        }

        function render() {

            // cube.rotation.y +=0.01
            // console.log(Date.now() * 0.0001);
            let timer = Date.now() * 0.0001

            camera.position.x = Math.cos(timer) * 800
            camera.position.z = Math.sin(timer) * 800

            camera.lookAt(scene.position)

            renderer.render( scene, camera );

        }


        </script>
    </body>
</html>


        </script>
    </body>
</html>
